<script setup lang="ts">
import BeehiveArea from "@/views/RightPart/BeehiveArea.vue";
import FruitArea from "@/views/RightPart/FruitsArea.vue";
import ToolsArea from "@/views/RightPart/ToolsArea.vue";
import GoodsArea from "@/views/RightPart/GoodsArea.vue";
import CompostArea from "@/views/RightPart/CompostArea.vue";
</script>

<template>
  <div class="right-part-top col-12">
    <div class="top-left container-fluid h-100">
      <div class="beehive-area">
        <beehive-area></beehive-area>
      </div>
      <div class="fruits-area">
        <fruit-area></fruit-area>
      </div>
    </div>
    <div class="top-right container-fluid h-100">
      <div class="tools-area h-100">
        <tools-area></tools-area>
      </div>
    </div>
  </div>
  <div class="right-part-bottom col-12 container-fluid">
    <div class="goods-area col-9 h-100">
      <goods-area></goods-area>
    </div>
    <div class="compost-area col-3 h-100">
      <compost-area></compost-area>
    </div>
  </div>
</template>

<style scoped>
.right-part-top {
  display: flex;
  height: 65%;
}

.right-part-top .top-left {
  display: flex;
  flex-direction: column;
  width: 40%;
}

.top-left .beehive-area {
  height: 35%;
}

.top-left .fruits-area {
  height: 65%;
}

.right-part-top .top-right {
  width: 60%;
}

.right-part-bottom {
  display: flex;
  height: 35%;
}
</style>